import 'package:flutter/material.dart';

class ShopItem extends StatelessWidget {
  const ShopItem({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 230,
      padding: const EdgeInsets.all(10),
      decoration: const BoxDecoration(
        color: Colors.black12,
      ),
      child: Column(
        children: [
          _buildHeader(),
          _buildContent(),
          _buildFooter(),
        ],
      ),
    );
  }

  // 头部
  Widget _buildHeader() {
    return const Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('2025-10-26 16:49:01'),
        Text('待发货', style: TextStyle(color: Colors.red))
      ],
    );
  }

  // 内容
  Widget _buildContent() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Row(
        // 侧轴顶部对齐
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 左侧
          Image.network(
            'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
            width: 100,
            height: 100,
          ),
          const SizedBox(width: 10),
          // 右侧
          Expanded(
              flex: 1,
              child: Column(
                // 侧轴顶部对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 上边第一部分
                  const Row(
                    children: [
                      Expanded(
                        child: Text(
                          '茶水分离杯耐热隔热玻璃杯, 茶水分离杯耐热隔热玻璃杯, 茶水分离杯耐热隔热玻璃杯',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      SizedBox(width: 10),
                      Text('x2'),
                    ],
                  ),
                  // 中间部分
                  Container(
                    margin: const EdgeInsets.symmetric(vertical: 8),
                    padding:
                        const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
                    decoration: BoxDecoration(
                      color: Colors.black26,
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: const Text('规格:白色240ml',
                        style: TextStyle(fontSize: 12, color: Colors.white)),
                  ),
                  // 价格
                  const Text('￥10.00',
                      style: TextStyle(fontSize: 16, color: Colors.red)),
                ],
              ))
        ],
      ),
    );
  }

  // 底部
  Widget _buildFooter() {
    return SizedBox(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          const Text('合计: ￥20.00'),
          const SizedBox(height: 6),
          Container(
            width: 80,
            height: 30,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(5),
              // 渐变
              gradient: const LinearGradient(
                colors: [Colors.red, Colors.orange],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
            child: const Center(
              child: Text(
                '去支付',
                style: TextStyle(fontSize: 16, color: Colors.white),
              ),
            ),
          )
        ],
      ),
    );
  }
}
